// 该页面为系统用户管理页面，已归类到 system 目录
<template>
  <div>
    <TableSearch :query="param" :options="searchOpt" :search="handleSearch" />
    <!-- 表格  -->
    <div class="container">
      <TableCustom
        :columns="columns"
        :table-data="tableData"
        :total="total"
        :view-func="handleView"
        :del-func="handleDelete"
        :page-change="changePage"
        :edit-func="handleEdit"
      >
        <template #toolbarBtn>
          <el-button type="warning" :icon="CirclePlusFilled" @click="handleAdd">新增</el-button>
        </template>
        <!--角色管理列-->
        <template #roles="{ row }">
          <el-button type="primary" size="small" plain @click="handlePermission(row)">
            管理
          </el-button>
        </template>
      </TableCustom>
    </div>

    <el-dialog
      v-model="visible"
      :title="isEdit ? '编辑' : '新增'"
      width="700px"
      destroy-on-close
      :close-on-click-modal="false"
      @close="closeDialog"
    >
      <TableEdit
        :form-data="rowData"
        label-width="100px"
        :span="24"
        :columns="editColumns"
        :edit="isEdit"
        :update="updateData"
      />
    </el-dialog>
    <el-dialog v-model="viewVisible" title="查看详情" width="700px" destroy-on-close>
      <TableDetail :row="viewRow" :columns="viewColumns"></TableDetail>
    </el-dialog>

    <el-dialog v-model="manageVisible" title="角色管理" width="500px" destroy-on-close>
      <TreeManage
        :manage-id="manageId"
        :manage-data="manageRoles"
        label="roleName"
        :manage-tree="manageTree"
        :submit="updateRoleMenus"
      />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue'
  import { CirclePlusFilled } from '@element-plus/icons-vue'
  import { page, remove, roles, rolesUpdate, saveOrUpdate } from '@/api/user.ts'
  import { UserPageParam, UserSaveOrUpdateParam, User } from '@/types'
  import TableCustom from '@/components/common/TableCustom.vue'
  import TableDetail from '@/components/common/TableDetail.vue'
  import TableSearch from '@/components/common/TableSearch.vue'
  import { FormOption, TableColumns } from '@/types/form-option.ts'
  import TableEdit from '@/components/common/TableEdit.vue'
  import { ElMessage } from 'element-plus'
  import { dayjsFormatter } from '@/utils/dayjs-util.ts'
  import TreeManage from '@/components/common/TreeManage.vue'
  import { list } from '@/api/role.ts'

  // 查询接口入参
  const param: UserPageParam = reactive({
    username: '',
    pageNum: 1,
    pageSize: 10,
  })
  //输入框配置
  const searchOpt = ref<FormOption[]>([{ type: 'input', label: '用户名：', prop: 'username' }])
  //搜索方法
  const handleSearch = () => {
    changePage(1)
  }

  // 表格列配置
  let columns = ref<TableColumns[]>([
    { type: 'index', prop: '', label: '序号', width: 55, align: 'center' },
    { prop: 'username', label: '用户名' },
    { prop: 'nickname', label: '昵称' },
    { prop: 'realName', label: '姓名' },
    {
      prop: 'birthday',
      label: '生日',
      formatter: (data: unknown) => {
        if (!data) return ''
        return dayjsFormatter(data as string, 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD')
      },
    },
    { prop: 'email', label: '邮箱' },
    { prop: 'phone', label: '手机号' },
    { prop: 'gitee', label: 'gitee', visible: false },
    { prop: 'github', label: 'github', visible: false },
    { prop: 'description', label: '个人描述' },
    { prop: 'roles', label: '角色管理' },
    { prop: 'operator', label: '操作', width: 250 },
  ])

  //table数据
  const tableData = ref<User[]>([])
  const total = ref(0)

  //更新数据方法
  const getData = async () => {
    const data = await page(param)
    tableData.value = data.records
    total.value = data.total
  }
  //初始化获取数据
  getData()

  //跳到页面
  const changePage = (val: number) => {
    param.pageNum = val
    getData()
  }

  // 新增/编辑弹窗相关
  let editColumns = ref()
  const visible = ref(false)
  const isEdit = ref(false)
  const rowData = ref()
  //显示新增弹窗
  const handleAdd = () => {
    visible.value = true
    isEdit.value = false
    editColumns.value = [
      { type: 'input', label: '用户名', prop: 'username', required: true },
      { type: 'input', label: '密码', prop: 'password', required: true },
      { type: 'input', label: '昵称', prop: 'nickname', required: true },
      { type: 'input', label: '真实名字', prop: 'realName', required: true },
      { type: 'date', label: '生日', prop: 'birthday', required: true, format: 'YYYY-MM-DD' },
      { type: 'input', label: '邮箱', prop: 'email', required: true },
      { type: 'input', label: '手机号', prop: 'phone', required: true },
      { type: 'input', label: 'gitee', prop: 'gitee', required: true },
      { type: 'input', label: 'github', prop: 'github', required: true },
      { type: 'textarea', label: '个人描述', prop: 'description', required: true },
    ]
  }
  //显示编辑弹窗
  const handleEdit = (row: UserSaveOrUpdateParam) => {
    rowData.value = { ...row }
    isEdit.value = true
    visible.value = true
    editColumns.value = [
      { type: 'input', label: '用户名', prop: 'username', required: true },
      { type: 'input', label: '昵称', prop: 'nickname', required: true },
      { type: 'input', label: '真实名字', prop: 'realName', required: true },
      { type: 'date', label: '生日', prop: 'birthday', required: true, format: 'YYYY-MM-DD' },
      { type: 'input', label: '邮箱', prop: 'email', required: true },
      { type: 'input', label: '手机号', prop: 'phone', required: true },
      { type: 'input', label: 'gitee', prop: 'gitee', required: true },
      { type: 'input', label: 'github', prop: 'github', required: true },
      { type: 'textarea', label: '个人描述', prop: 'description', required: true },
    ]
  }
  //保存新增修改数据
  const updateData = async (data: UserSaveOrUpdateParam) => {
    await saveOrUpdate(data)
    ElMessage.success('保存成功')
    closeDialog()
    await getData()
  }

  const closeDialog = () => {
    visible.value = false
    isEdit.value = false
  }

  // 查看详情弹窗相关
  const viewVisible = ref(false)
  const viewRow = ref({})
  const viewColumns = ref([
    { prop: 'id', label: '用户ID' },
    { prop: 'username', label: '用户名' },
    { prop: 'nickname', label: '昵称' },
    { prop: 'realName', label: '真实名字' },
    { prop: 'birthday', label: '生日' },
    { prop: 'email', label: '邮箱' },
    { prop: 'phone', label: '电话' },
    { prop: 'gitee', label: 'gitee地址' },
    { prop: 'github', label: 'github地址' },
    { prop: 'description', label: '个人描述' },
    { prop: 'createTime', label: '创建时间' },
  ])
  const handleView = (row: User) => {
    viewRow.value = { ...row }
    viewVisible.value = true
  }

  // 删除相关
  const handleDelete = async (user: User) => {
    await remove({ id: user.id })
    ElMessage.success('删除成功')
    //刷新页面
    await getData()
  }

  const manageVisible = ref(false)
  const manageId = ref()
  const manageRoles = ref()
  const manageTree = ref()
  const getManageTree = async () => {
    manageTree.value = await list({})
  }
  getManageTree()

  //初始化管理弹窗
  const handlePermission = async (row: User) => {
    manageId.value = row.id
    let data = await roles({ id: row.id })
    manageRoles.value = data.roles
    manageVisible.value = true
  }
  //关闭管理弹窗
  const closeManageDialog = () => {
    manageVisible.value = false
  }
  //更新方法
  const updateRoleMenus = async (id: string | number, roles: Array<string | number>) => {
    await rolesUpdate({ id, roles })
    ElMessage.success('更新成功')
    closeManageDialog()
  }
</script>

<style scoped></style>
